<template>
  <el-dialog title="报名情况" width="1000px" :visible="visible" @close="handleClose">
    <div>
      <el-table :data="data">
        <el-table-column prop="nickName" label="昵称" fixed min-width="120">
          <template slot-scope="scope">
              <span>{{(scope.row.nickName != 0 && (scope.row.nickName == '' || scope.row.nickName == null)) ? '--' : scope.row.nickName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phoneNumber" label="手机号" min-width="150">
          <template slot-scope="scope">
              <span>{{(scope.row.phoneNumber != 0 && (scope.row.phoneNumber == '' || scope.row.phoneNumber == null)) ? '--' : scope.row.phoneNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="企业名称" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
              <span>{{(scope.row.companyName != 0 && (scope.row.companyName == '' || scope.row.companyName == null)) ? '--' : scope.row.companyName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="provinceName" label="省份" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
              <span>{{(scope.row.provinceName != 0 && (scope.row.provinceName == '' || scope.row.provinceName == null)) ? '--' : scope.row.provinceName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cityName" label="城市" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
              <span>{{(scope.row.cityName != 0 && (scope.row.cityName == '' || scope.row.cityName == null)) ? '--' : scope.row.cityName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dateOfBirth" label="出生日期" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.dateOfBirth">{{$utils.dateFormat(new Date(scope.row.dateOfBirth), 'yyyy-MM-dd')}}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
              <span>{{(scope.row.email != 0 && (scope.row.email == '' || scope.row.email == null)) ? '--' : scope.row.email}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" min-width="60">
          <template slot-scope="scope">
              <span v-if="scope.row.sex==0">男</span>
              <span v-else-if="scope.row.sex==1">女</span>
              <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-10 t-right" v-if="total > 0">
        <el-pagination
          background
          :current-page="currentPage"
          :total="total"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          >
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: ['visible', 'advertId'],
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        data: []
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        const params = {
          advertId: this.advertId,
          pageSize: this.pageSize,
          currentPage: this.currentPage
        }
        this.$api.advert.getListPageCustomer(params).then(res => {
          if(res.success) {
            this.data = res.data.list
            this.total = res.data.total
          }
        })
      },
      handleClose() {
        this.$emit('close', false);
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.loadData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.loadData()
      },
    }
  }
</script>

<style>

 
</style>
